<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>38练习：下拉菜单</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                list-style: none;
                width: 300px;
                height: 50px;
                background: red;
                margin:100px auto;
            }
            .nav>li{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                float: left;
            }
            .sub{
                list-style: none;
                background: mediumorchid;
                display: none;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            /*
                在jQuery中如果需要执行动画，建议在执行动画之前先调用stop()方法，然后再执行动画
            */
            $(function name(params) {
                //1.监听一级菜单的移入事件
                $(".nav>li").mouseenter(function (param) { 
                    //1.1拿到二级菜单
                    var $sub=$(this).children(".sub");
                    //停止当前的动画
                    $sub.stop();
                    //1.2让二级菜单展开
                    $sub.slideDown(1000);
                 });
                //2.监听一级菜单的移出事件
                $(".nav>li").mouseleave(function (param) { 
                    //2.1拿到二级菜单
                    var $sub=$(this).children(".sub");
                    //停止当前的动画
                    $sub.stop();
                    //2.2让二级菜单收起
                    $sub.slideUp(1000);
                });
            })
        </script>
    </head>
    <body>
        <ul class="nav">
            <li>一级菜单
                <ul class="sub">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单</li>
            <li>一级菜单</li>
        </ul>

    </body>
</html>